import {useState, useEffect} from 'react';
import {Select, message} from 'antd'
import {SelectPackage as Package} from '@/services/package'

const SelectPackage = (props) => {
  const {onChange, duration} = props
  const [list, setList] = useState([]);
  const [value, setValue] = useState(null);
  useEffect(() => {
    if (duration != null) {
      setValue(null)
      Package({package_duration: duration}).then(res => {
        if (res.status === 200) {
          setList(res.data)
        } else {
          message.error(res.message).then()
        }
      })
    }

  }, [duration])
  return (
    <Select
      showSearch
      allowClear
      autoClearSearchValue
      value={value}
      onChange={(e) => {
        onChange(e);
        setValue(e);
      }}
      filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      placeholder={'请选择计费套餐'}
    >
      {list.map((item) => (
        <Select.Option value={item.package_id}>{item.package_name}--￥{item.package_price}</Select.Option>
      ))}
    </Select>
  );
};

export default SelectPackage;
